"use client"
import { Calendar, CheckCircle2, Plus, TrendingUp } from "lucide-react"
import type { HistoryRecord, Language } from "@/types"

interface HistoryTimelineProps {
  history: HistoryRecord[]
  currentLang: Language
}

export default function HistoryTimeline({ history, currentLang }: HistoryTimelineProps) {
  const t = currentLang.translations

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const today = new Date()
    const yesterday = new Date(today)
    yesterday.setDate(yesterday.getDate() - 1)

    if (date.toDateString() === today.toDateString()) {
      return currentLang.code === "zh" ? "今天" : "Today"
    } else if (date.toDateString() === yesterday.toDateString()) {
      return currentLang.code === "zh" ? "昨天" : "Yesterday"
    } else {
      return date.toLocaleDateString(currentLang.code === "zh" ? "zh-CN" : "en-US", {
        month: "short",
        day: "numeric",
      })
    }
  }

  if (history.length === 0) {
    return (
      <div className="text-center text-gray-500 py-4 text-sm">
        <Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
        {t.noHistory}
      </div>
    )
  }

  return (
    <div className="space-y-3 max-h-64 overflow-y-auto custom-scrollbar">
      {history.map((record, index) => (
        <div key={record.id} className="relative">
          {/* Timeline line */}
          {index < history.length - 1 && <div className="absolute left-4 top-8 w-0.5 h-8 bg-gray-200"></div>}

          {/* Timeline node */}
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
              <Calendar className="w-4 h-4 text-blue-600" />
            </div>

            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between mb-1">
                <h4 className="text-sm font-medium text-gray-900">{formatDate(record.date)}</h4>
                <span className="text-xs text-gray-500">{record.completionRate}%</span>
              </div>

              <div className="space-y-1 text-xs text-gray-600">
                {record.createdTasks.length > 0 && (
                  <div className="flex items-center gap-1">
                    <Plus className="w-3 h-3 text-green-600" />
                    <span>
                      {t.tasksCreated}: {record.createdTasks.length}
                    </span>
                  </div>
                )}

                {record.completedTasks.length > 0 && (
                  <div className="flex items-center gap-1">
                    <CheckCircle2 className="w-3 h-3 text-blue-600" />
                    <span>
                      {t.tasksCompleted}: {record.completedTasks.length}
                    </span>
                  </div>
                )}

                <div className="flex items-center gap-1">
                  <TrendingUp className="w-3 h-3 text-purple-600" />
                  <span>
                    {t.completionRate}: {record.completionRate}%
                  </span>
                </div>
              </div>

              {/* Progress bar */}
              <div className="mt-2 w-full bg-gray-200 rounded-full h-1">
                <div
                  className="bg-blue-500 h-1 rounded-full transition-all duration-300"
                  style={{ width: `${record.completionRate}%` }}
                ></div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
